$video-size: 100px
$shadow-size: 2px

.videos
  white-space: nowrap

.videos-grid
  display: flex
  flex-wrap: wrap
  flex: 1 1 25%

  @media (orientation: portrait)
    flex-direction: column

.video-container
  background-color: rgba($color-bg, 0.8)
  box-shadow: 0px 0px 1px rgba(black, 0.3)
  position: relative
  display: flex
  flex-grow: 1

  .video-footer
    position: absolute
    left: 0
    bottom: 0
    right: 0

    display: flex
    flex: 1 1 100%

    .vu-meter
      position: absolute
      left: 0.5rem
      bottom: 0.5rem

  .nickname
    border: none
    background: transparent
    flex: 1
    font-size: 0.8rem
    padding: 2px 4px 2px 4px
    white-space: nowrap
    text-overflow: ellipsis
    overflow: hidden
    color: white
    text-shadow: 0 0px 2px black
    text-align: center
    margin-left: 1.75rem

  video
    object-fit: cover
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    width: 100%
    height: 100%

.videos-toolbar
  position: absolute
  z-index: $z-index-videos-toolbar
  left: 0
  right: 0
  display: flex
  flex-wrap: nowrap
  justify-content: flex-end
  overflow-x: auto
  overflow-y: hidden
  padding-bottom: 1px

.videos-toolbar .video-container
  flex: 0 0 $video-size
  width: $video-size
  height: $video-size

.video-container.mirrored video
  transform: rotateY(180deg)
  -webkit-transform: rotateY(180deg)
  -moz-transform: rotateY(180deg)
